import React from "react";
import {getReservoirInfo} from '../../../service/api';
import Trees from '../../../components/Trees/Trees';
import { Table, Button, Form, Input } from 'antd';
const FormItem = Form.Item;
const columns = [
    {
        dataIndex: 'id',
        title: 'id',
        width: 80
    },
    {
        dataIndex: 'reservoirname',
        title: '水库名称',
        width: 120
    },
    {
        dataIndex: 'regionname',
        title: '责任主体',
        width: 120
    },
    {
        dataIndex: 'chiefid',
        title: '库长',
        width: 120
    },
    {
        dataIndex: 'rlevel',
        title: '水库级别',
        width: 80
    },
    {
        dataIndex: 'reservoirbank',
        title: '岸别',
        width: 80
    },
    {
        dataIndex: 'reservoirstart',
        title: '起始地点',
        width: 100
    },
    {
        dataIndex: 'reservoirend',
        title: '终止地点',
        width: 100
    },
    {
        dataIndex: 'stakestart',
        title: '起始桩号',
        width: 100
    },
    {
        dataIndex: 'stakeend',
        title: '终止桩号',
        width: 100
    }
    // {
    //     dataIndex: 'param',
    //     title: '详情',
    //     width: 80,
    //     render: () => (
    //         <span className="getInfo">详情</span>
    //     )
    // }
]

class ReservoirInfo extends React.Component {

    state = {
        permissions: JSON.parse(localStorage.permissions),
        limit: 20,
        offset: 0,
        reservoirName: "",
        regionID: "",
        data: [],
        loading: true,
        pagination: {pageSize: 20},
        height: document.body.clientHeight - 230,
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        let self = this;
        const pagination = { ...this.state.pagination };
        self.setState({loading: true});
        getReservoirInfo({
            limit: this.state.limit,
            offset: this.state.offset,
            regionID: this.state.regionID,
            reservoirName: this.state.reservoirName,
        }).then(function (data) {
            pagination.total = data.data.total;
            if(data.code === 200){
                self.setState({data: data.data.rows, showData: data.data.rows, loading: false, pagination})
            }
        })

    }

    handleTableChange = (pagination, filters, sorter)=> {
        this.setState({loading: true, offset: (pagination.current-1)*pagination.pageSize},function () {
            this.getData();
        })
    }

    getId = (value)=> {
        this.setState({
            regionID: value[0]
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.setState({
                reservoirName: values.reservoirName
            }, () => {
                this.getData();

            })
        })

    }

    render(){
        const { getFieldDecorator } = this.props.form;
        let data = [];
        for(let i in this.state.data){
            data.push({
                key: i,
                id: this.state.data[i].id,
                reservoirname: this.state.data[i].reservoirname,
                regionname: this.state.data[i].regionname,
                chiefid: this.state.data[i].chiefid,
                rlevel: this.state.data[i].rlevel,
                reservoirbank: this.state.data[i].reservoirbank,
                reservoirend: this.state.data[i].reservoirend,
                stakestart: this.state.data[i].stakestart,
                stakeend: this.state.data[i].stakeend,
            })
        }

        return(
            <div className="clearfix hezhangInfo page">
                <div className="treeArea">
                    <Trees getId={this.getId} />
                </div>
                <div className="mt10 tableArea">
                    <Form className="searchForm" layout="inline" onSubmit={this.handleSubmit}>
                        <FormItem>
                            {getFieldDecorator('reservoirName',{
                                initialValue: ""
                            })(
                                <Input placeholder="水库名称" />
                            )}
                        </FormItem>

                        <FormItem>
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        </FormItem>
                    </Form>
                    <Table className="mt10 scrollTable" columns={columns} dataSource={data} loading={this.state.loading} pagination={this.state.pagination} onChange={this.handleTableChange} scroll={{y: this.state.height }} bordered />
                </div>
            </div>
        )
    }

}
const ReservoirInfoForm = Form.create()(ReservoirInfo);
export default ReservoirInfoForm;